<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- div 块级元素，独占一行 -->
    <div>
        <!-- 行内元素，不独占一行 -->
        <span>咬人猫</span>
        <span>咬人猫</span>
        <span>咬人猫</span>
    </div>
    <div>
        <span>兔总裁</span>
        <span>兔总裁</span>
        <span>兔总裁</span>
    </div>
    <div>
        <span>阿叶君</span>
        <span>阿叶君</span>
        <span>阿叶君</span>
    </div>

    <!-- 表单标签的关键字是 form -->
    <form >
        <!-- 表示一个 30列，10行的编辑框 -->
        <!-- <textarea  cols="30" rows="10">

        </textarea> -->
        <!-- <select> -->
            <!-- 一个下拉菜单里面，应该有很多的选项 -->
            <!-- 此时，就可以使用 option 标签，value暂且不用删掉。 -->
            <!-- <option>-- 请选择年份 --</option> -->
            <!-- <option selected="selected">2000</option>
            <option>2001</option>
            <option>2002</option>
            <option>2003</option>
            <option>2004</option>
        </select> -->

        <!-- file属性：选择文件 -->
        <!-- <input type="file"> -->

        <!-- 普通按钮 -->
        <!-- <button onclick="alert('hellp')">第二种写法</button> -->
        <!-- <input type="button" value="这是按钮" onclick="alert('hello')"> -->


        <!-- 单行文本框 -->
        <!-- text：文本框里面的输入的内容不能换行 -->
        <!-- <input type="text" ><br> -->
        <!-- 密码框：password：同样也时单行文本框，它可以用来输入密码 -->
        <!-- <input type="password"><br> -->
        <!-- 单选框：radio -->
        <!-- <input type="radio" name="gender" id="male">
        <label for="male">男</label>
        <input type="radio" name="gender" checked="checked" id="female">
        <label for="female">女</label>
        <br> -->
        <!-- 复选框 -->
        <!-- <input type="checkbox" id="food" checked="checked">
        <label for="food">吃饭</label>
        
        <input type="checkbox" id="sleep">
        <label for="sleep">睡觉</label>

        <input type="checkbox" id="wc">
        <label for="wc">上厕所</label>

        <input type="checkbox" id="playGame">
        <label for="playGame">打游戏</label> -->
    </form>



    <!-- <h3>无序列表</h3> -->
    <!-- ul 标签 表示整个无序列表 -->
    <!-- ul ==  Unordered Lists - 无序列表 -->
    <!-- <ul> -->
        <!-- li 标签 表示列表中的每一个选项 -->
        <!-- li == List Item - 列表项 -->
        <!-- <li>咬人猫</li>
        <li>兔总裁</li>
        <li>阿叶君</li>
    </ul>

    <h3>有序列表</h3> -->
    <!-- ol 标签 表示整个有序列表 -->
    <!-- ol == Ordered Lists - 有序列表 -->
    <!-- <ol> -->
         <!-- li 标签 表示列表中的每一个选项 -->
        <!-- li == List Item - 列表项 -->
        <!-- <li>咬人猫</li>
        <li>兔总裁</li>
        <li>阿叶君</li>
    </ol>

    <h3>自定义列表</h3> -->
    <!-- 用 dl 来表示整个自定义列表 -->
    <!-- dl == Definition Lists -->
    <!-- <dl> -->
        <!-- 使用 dt 标签 来表示小标题/定义项 -->
        <!-- dt == Definition Term -->
        <!-- <dt>奥特曼</dt> -->
        <!-- 使用 dd 标签 来表示列表项 -->
        <!-- dd == Definition Description - 自定义描述 -->
        <!-- <dd>奈克赛斯</dd>
        <dd>雷杰多</dd>
        <dd>赛迦</dd>
    </dl> -->



    <!-- 借助一个style标签  -->
    <!-- <style>
        /* 这是 CSS 的注释符 */

        /* 给列添加属性 */
        td {
            /* text-align - 文本调整    center 中间 */
            text-align: center;
        }
    </style> -->
    
    <!-- 首先，最外层是一个table标签，这是必要的 -->
    <!-- <table border="2px" width="500px" height="300px" cellspacing="0"> border就是边框的意思 -->
        <!-- 一个表格会有很多行，每一行就是一个 tr 标签，每一列就是一个 td 标签-->
        <!-- <tr>
            <th>姓名</th>
            <th>电话</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>110</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>199</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>120</td>
        </t>

    </table> -->


    <!-- <a href="https://www.sogou.com">
        <img src="star.jpg" alt="">
    </a> -->
    <!-- <a href="aaa.zip">下载链接</a> -->
    <!-- <a href="#">这是一个空链接</a> -->
    <!-- <a href="test.html">这是一个跳转到test 的超链接</a> -->
    <!-- <a href="https://www.sogou.com">这是一个超链接</a>
    <a href="sdasdasdasdasd">这是第二个超链接</a> -->


    <!-- 网页地址 -->
    <!-- <img src="http://img.hb.aicdn.com/7378f66599670a3614ce38edf79bf1551dacd8d0f5c70-53yvFv_fw580" alt="">
    <br> -->
    <!-- 选择当前 HTML 文件中的图片 -->
    <!-- <img src="sta.jpg" alt="国产凌凌漆">
    <br> -->
    <!-- 绝对路径 -->
    <!-- <img src="G:\HTML\star.jpg" alt="" title="周星驰，莫文蔚" width="500px" >
    <br> -->
    <!-- 相对路径 -->
    <!-- <img src="./star.jpg" alt=""> -->

    <!-- <strong>加粗</strong>
    <b>加粗</b>

    <em>倾斜</em>
    <i>倾斜</i>

    <del>删除线</del>
    <s>删除线</s>

    <ins>下划线</ins>
    <u>下划线</u> -->


    <!-- <style>
        p{
            text-indent: 2em;
        }
    </style>
    <p>这是第一&nbsp;&nbsp;&nbsp;个段落: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum,eaque in debitis delectus unde quis magnam consequuntur qui iusto minima minus dolor similique exercitationem, suscipit provident ea. Sunt, adipisci impedit?</p>
    <p>这是第二个段落: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias quod, molestiae error quas inventore sed vitae sequi modi illum, minima ad neque harum atque quaerat repudiandae odio ipsa ea id.</p>
    <p>这是第三个段落: Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque alias molestias porro soluta repellat placeat eaque eligendi aliquam hic repudiandae. Ipsa neque dolore qui. Nam nostrum odit sit explicabo? Vitae.</p> -->

    <!-- <h1>这是一级标题</h1>
    <h1>这是一级标题</h1>
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>
    <h3>这是三级标题</h3>
    <h4>这是四级标题</h4>
    <h5>这是五级标题</h5>
    <h6>这是六级标题</h6> -->
    <!-- hello world! -->
    <!-- 这是注释 -->
</body>
</html>
